<template>
  <div class="wrap">
    <div class="header">
      <div class="header-back" @click="back">
        <a-icon type="left" style="margin-right: 8px" />
        待遇处理模板
      </div>
      <a-tabs @change="onTabChange">
        <a-tab-pane key="jcxx" tab="基础信息" />
        <a-tab-pane key="clgc" tab="处理过程" />
      </a-tabs>
    </div>
    <div class="main">
      <TabJcxx ref="jcxx" v-show="activeTab === 'jcxx'" :isCreate="isCreate" />
      <TabClgc ref="clgc" v-show="activeTab === 'clgc'" :isCreate="isCreate" />
    </div>
    <div class="footer">
      <a-button type="primary" @click="save">保存</a-button>
    </div>
  </div>
</template>
<script>
import TabJcxx from "./jcxx";
import TabClgc from "./clgc";
import { detailTemplateReq, addTemplateReq, updateTemplateReq } from "./api";
export default {
  name: "",
  components: { TabJcxx, TabClgc },
  mixins: [],
  props: {},
  data() {
    return {
      activeTab: "jcxx"
    };
  },
  computed: {
    tempId() {
      return this.$route.params.id;
    },
    isCreate() {
      return !!!this.tempId;
    },
    groupKey() {
      return this.isCreate ? "formGroupAddList" : "formGroupUpdateList";
    }
  },
  watch: {},
  created() {},
  mounted() {
    if (this.tempId) {
      this.loadDetail();
    }
  },
  methods: {
    save() {
      const infoBase = this.$refs.jcxx.getValues();
      const infoProcess = this.$refs.clgc.getValues();
      infoBase[this.groupKey] = [].concat(infoBase[this.groupKey], infoProcess);
      const reqFunc = this.isCreate ? addTemplateReq : updateTemplateReq;
      reqFunc(infoBase)
        .then((res) => {
          if (res && res.data) {
            this.$message.success("保存成功");
            this.back();
          } else {
            this.$message.error("保存失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadDetail() {
      detailTemplateReq(this.tempId)
        .then((res) => {
          this.$refs.jcxx.setValues(res.data);
          this.$refs.clgc.setValues(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.$router.go(-1);
    },
    onTabChange(key) {
      if (this.activeTab !== key) {
        this.activeTab = key;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100%;
  padding: 77px 0;
  background: #f4f4f4;
}
.header {
  top: 0;
  left: 0;
  right: 0;
  height: 53px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;
  .header-back {
    position: absolute;
    left: 12px;
    top: 0;
    height: 53px;
    line-height: 53px;
    display: flex;
    align-items: center;
    color: rgba(216, 216, 216, 1);
    cursor: pointer;
  }
}
::v-deep .ant-tabs-bar {
  border-bottom: none;
  margin: 0;
}
::v-deep .ant-tabs-nav-container {
  line-height: 30px;
}
.main {
  background: #fff;
  width: 954px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 24px;
}
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  height: 53px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background: #fff;
  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12);
  z-index: 10;
}
</style>
